import React from 'react'
import '../css/Jly_xcyjs.css'
import { Rate,Button } from 'antd-mobile'
import { PhoneFill } from 'antd-mobile-icons'
import { useDispatch } from 'react-redux'
import { changeDefaultState } from "../../../redux/slice/DefaultSlice"
export default function Jly_xcyjs() {
    const dispatch = useDispatch()
    return (
        <div className='Jly_xcyjs_main animate__animated animate__bounceInUp'>
            <div className='jly_xcyjs_top'>
                <div>
                    <h3>18.00<span>元</span></h3>
                    <p>暂无优惠</p>
                </div>
                <div>
                    <button>费用明细{'>'}</button>
                </div>
            </div>
            <hr />
            <div className='jly_xcyjs_bottom'>
                <div className='jly_xcyjs_bottom_img'>
                    <img src="" alt="" />
                </div>
                <div className='jly_xcyjs_bottom_text'>
                    <h3>粤A·77777</h3>
                    <p>黑色|劳斯莱斯库里南</p>
                    <div style={{ marginTop: '0.2381rem' }}>胡师傅<Rate readOnly value={5} style={{
                        '--star-size': '0.2857rem',
                        '--active-color': 'orangered',
                    }} /><span style={{ color: 'orangered' }}>5.0分</span></div>
                </div>
                <div className='jly_xcyjs_bottom_button'>
                    <PhoneFill fontSize={25} color='#fff' />
                </div>
            </div>
            <div className='jly_xcyjs_btn'>
                <Button color='primary' size='large'>一键报警</Button>
                <Button color='primary' size='large' onClick={()=>{dispatch(changeDefaultState(9))}}>立即支付</Button>  
            </div>
        </div>
    )
}
